<template>
	<view class="content">
		<view class="userinfo-wrapper">
			<view class="userinfo uni-flex">
				<view class="userinfo__msg uni-flex-item">
					<view class="userinfo__msg__item">
						<text class="name">Fanny</text>
						<text class="class">正常用户</text>
					</view>
					<view class="userinfo__msg__item">
						<text class="phone">13361615485</text>
					</view>
				</view>
				<view class="userinfo__head uni-flex">
					<image src="../../static/head.png"></image>
				</view>
			</view>
		</view>

		<user-data :points="points" :allPoints="allPoints" :amount="amount" :deliverCount="deliverCount">
		</user-data>

		<view class="menu">
			<navigator class="menu__item uni-flex" v-for="(item, index) in menuList" :key="index" :url="item.url">
				<view class="menu__item__title uni-flex-item">
					<text :class="item.class" class="icon"></text>
					<text>{{item.title}}</text>
				</view>
				<view class="menu__item__arrow icon icon-gengduo1">
				</view>
			</navigator>
		</view>

		<view class="tabbar-line">
		</view>
	</view>
</template>

<script>
	import userData from '@/components/userData.vue'
	export default {
		components: {
			userData
		},
		data() {
			return {
				points: '22', //积分
				allPoints: '0', //累计积分
				amount: '0', //奖励金
				deliverCount: '0', //投递次数
				menuList: [
					{
						class: 'icon-jifen',
						title: '我的积分',
						url: '/pages/userCenter/myPoints'
					},
					{
						class: 'icon-jifen',
						title: '投递记录',
						url: ''
					},
					{
						class: 'icon-yonghu1',
						title: '关于我们',
						url: ''
					},
					{
						class: 'icon-bangzhu1',
						title: '帮助中心',
						url: ''
					},
					{
						class: 'icon-buzhi',
						title: '设置',
						url: ''
					},
					{
						class: 'icon-shouhuodizhi',
						title: '收货地址',
						url: ''
					},
					{
						class: 'icon-yonghu1',
						title: '回收员登录',
						url: ''
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.userinfo-wrapper {
		padding: 30rpx;
	}

	.userinfo {
		background: #F28400;
		color: #FFFFFF;
		padding: 30rpx;
		border-radius: 6px;
	}

	.userinfo__msg__item {
		display: flex;
		align-items: center;
		line-height: 48rpx;
	}

	.userinfo__msg__item .class {
		background: #fbb057;
		font-size: 22rpx;
		display: inline-block;
		width: 120rpx;
		margin-left: 8px;
		line-height: 36rpx;
		text-align: center;
		border-radius: 18rpx;
	}

	.userinfo__msg__item .phone {
		font-size: 26rpx;
	}

	.userinfo__head {
		align-items: center;
		justify-content: center;
	}

	.userinfo__head>image {
		width: 96rpx;
		height: 96rpx;
		border-radius: 20rpx;
	}

	.machine-list__item__arrow {
		width: 100rpx;
	}

	.menu {
		background: #FFFFFF;
	}

	.menu__item {
		margin-left: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 22rpx 0;
	}

	.menu__item:last-child {
		border-bottom: 0;
	}

	.menu__item__title {
		display: flex;
		font-size: 24rpx;
		align-items: center;
		line-height: 36rpx;
	}

	.menu__item__title .icon {
		font-size: 26rpx;
		margin-right: 16rpx;
	}

	.menu__item__arrow {
		text-align: center;
		width: 80rpx;
		color: #888888;
		font-size: 24rpx;
		line-height: 36rpx;
	}
</style>
